<template>
  <div class="bottom-bar">
    <div class="bar-item bar-left">
       <div>
          <i class="icon service"></i>
          <span class="text">客服</span>
       </div>
       <div>
          <i class="icon shop"></i>
          <span class="text">店铺</span>
       </div>
       <div>
          <i class="icon select"></i>
          <span class="text">收藏</span>
       </div>
    </div>
    <div class="bar-item bar-right">
       <div class="cart" @click="cart">加入购物车</div>
       <div class="buy">购买</div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return {

    }
  },
  methods:{
    cart(){
       this.$emit('cart')
    }
  }
}
</script>
<style scoped>
.bottom-bar{
  width:100%;
  height:50px;
  position: fixed;
  bottom: 0;
  left:0;
  z-index:100;
  display: flex;
}
.bar-left{
  display: flex;
  flex: 6;
}
.bar-left div{
  flex: 2;
  border-right: 1px solid #ccc;
}
.bar-left div:nth-child(3){
  border-right: 0;
}
.text{
  display: block;
  font-size: 12px;
  line-height: 50px;
  text-align: center;
}
.bar-right{
  display: flex;
  flex: 4;
}
.bar-right div{
  flex: 2;
  height:50px;
  line-height: 50px;
  color:#fff;
  font-weight: bold;
  font-size: 12px;
  text-align: center;
}
.bar-right div.cart{
 background: rgb(199, 22, 22);
}
.bar-right div.buy{
  background: rgb(201, 158, 20);
}
</style>
